<template>
  <el-timeline class="timeline">
    <el-timeline-item class="w-100%" v-for="group in timelineData" :key="group.date">
      <template #default>
        <div class="timeline-group">
          <!-- 日期显示 -->
          <div class="timeline-date">
            <el-button type="text" @click="toggleGroup(group.date)">
              {{ group.date }}
              <span>{{ expandedGroups.includes(group.date) ? '▲' : '▼' }}</span>
            </el-button>
          </div>
          <div v-if="expandedGroups.includes(group.date)">
            <div v-for="record in group.records" :key="record.id" class="timeline-item">
              <!-- 时间显示 -->
              <div class="item-left">
                <span class="item-time">{{ record.createTime }}</span>
              </div>
              <!-- 事件内容 -->
              <div class="item-right">
                <h4>{{ record.title }}</h4>
                <el-card shadow="always" class="record-card">
                  <div class="card-header">
                    <!-- 左侧头像和名称 -->
                    <div class="header-left">
                      <el-avatar size="small">Ma</el-avatar>
                      <div class="creator-info">
                        <p class="creator-name">{{ record.creator }}</p>
                        <p class="create-time">{{ record.createTime }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 主体内容 -->
                  <div v-if="expandedCards.includes(record.id)" class="card-body">
                    <p>合同单号：{{ record.contractId }}</p>
                    <p>快递公司：{{ record.expressCompany }}</p>
                    <p>快递单号：{{ record.expressId }}</p>
                    <div class="extra-info">
                      <h4>基础信息</h4>
                      <p>下次跟进提醒：{{ record.nextReminder ? '是' : '否' }}</p>
                      <p>同步完成访客：{{ record.visitorStatus }}</p>
                      <p>计划：{{ record.plan || '无' }}</p>
                      <h4>系统信息</h4>
                      <p>创建人：{{ record.creator }}</p>
                      <p>创建时间：{{ record.createTime }}</p>
                      <p>更新时间：{{ record.updateTime }}</p>
                    </div>
                  </div>
                  <!-- 展开/收起和操作按钮 -->
                  <div class="card-footer">
                    <el-button type="text" @click="toggleCard(record.id)">
                      {{ expandedCards.includes(record.id) ? '收起' : '展开' }}
                    </el-button>
                    <div class="action-icons">
                      <el-icon class="edit-icon" @click="editRecord(record)">
                        <el-icon-edit />
                      </el-icon>
                      <el-icon class="delete-icon" @click="deleteRecord(record.id)">
                        <el-icon-delete />
                      </el-icon>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import { Edit as ElIconEdit, Delete as ElIconDelete } from '@element-plus/icons-vue'

// 时间轴记录数据
const timelineData = ref([
  {
    date: '2025-02-10',
    records: [
      {
        id: 1,
        title: '合同跟进记录',
        createTime: '2025-02-10 12:00',
        contractId: 'SR20250208–AeBoxPro–2',
        expressCompany: '无需国内快递',
        expressId: 'DFT106848HO6L',
        nextReminder: false,
        visitorStatus: '无',
        plan: '',
        creator: 'Maxwell',
        updateTime: '2025-02-10 12:05'
      }
    ]
  },
  {
    date: '2025-02-08',
    records: [
      {
        id: 2,
        title: '合同跟进记录',
        createTime: '2025-02-10 12:00',
        contractId: 'SR20250208–AeBoxPro–2',
        expressCompany: '无需国内快递',
        expressId: 'DFT106848HO6L',
        nextReminder: false,
        visitorStatus: '无',
        plan: '',
        creator: 'Maxwell',
        updateTime: '2025-02-10 12:05'
      },
      {
        id: 3,
        title: '合同跟进记录',
        createTime: '2025-02-10 12:00',
        contractId: 'SR20250208–AeBoxPro–2',
        expressCompany: '无需国内快递',
        expressId: 'DFT106848HO6L',
        nextReminder: false,
        visitorStatus: '无',
        plan: '',
        creator: 'Maxwell',
        updateTime: '2025-02-10 12:05'
      }
    ]
  }
])

// 保存展开的分组
const expandedGroups = ref<string[]>([])

// 保存展开的卡片
const expandedCards = ref<number[]>([])

// 切换分组展开状态
const toggleGroup = (date: string) => {
  if (expandedGroups.value.includes(date)) {
    expandedGroups.value = expandedGroups.value.filter((d) => d !== date)
  } else {
    expandedGroups.value.push(date)
  }
}

// 切换卡片展开状态
const toggleCard = (id: number) => {
  if (expandedCards.value.includes(id)) {
    expandedCards.value = expandedCards.value.filter((cardId) => cardId !== id)
  } else {
    expandedCards.value.push(id)
  }
}

// 编辑记录
const editRecord = (record: any) => {
  console.log('Editing record:', record)
  // 可以添加逻辑，比如打开弹窗进行编辑
}

// 删除记录
const deleteRecord = (id: number) => {
  console.log('Deleting record:', id)
  // 这里可以加删除逻辑，比如弹出确认框
}
</script>

<style scoped>
.timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.timeline-group {
  display: flex;
  flex-direction: column;
}

.timeline-date {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.item-left {
  width: 100px;
  padding-right: 15px;
  font-size: 14px;
  color: #666;
  text-align: right;
}

.item-right {
  flex: 1;
}

.item-time {
  display: inline-block;
  padding: 4px 8px;
  background-color: #f3f3f3;
  border-radius: 4px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.header-left {
  display: flex;
  align-items: center;
}

.creator-info {
  margin-left: 10px;
}

.creator-name {
  font-weight: bold;
}

.create-time {
  font-size: 12px;
  color: #888;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.action-icons {
  display: flex;
  gap: 10px;
}

.edit-icon,
.delete-icon {
  font-size: 18px;
  cursor: pointer;
}

.edit-icon:hover {
  color: #409eff;
}

.delete-icon:hover {
  color: #f56c6c;
}
</style>
